<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-pop2.css"/>
		<link rel="stylesheet" type="text/css" href="../business/css/empcss.css"/>
		<style type="text/css">
			
			
			.content{
				width: 100%;
				background-color: #F2F2F2;
				padding: 10px;
			}
			.search{
				display: flex;
				justify-content: center;
				align-content: center;
				padding: 10px;
				background-color: white;
			}
			.stext{
				width: 30%;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				border-right:1px solid #C7C7CC;
			}
			.simg{
				width: 30px;
				height: 30px;
			}
			.simg>img{
				width: 100%;
				height: 100%;
			}
			.ssdiv{
				width: 70%;
			}
			.ssinp{
				width: 100%;
				height: 100%;
				border: 0;
				padding-left: 10px;
			}
			::-webkit-input-placeholder{
				font-size: 0.8em;
				color: #999999;
			} 
			.sjx{
				margin: auto;
				width: 0;
				height: 0;
			    border:10px solid transparent;
				border-top: 10px solid #000000;
				position: relative;
				top: 20%;
			}
			.dments{
				width: 100%;
			}
			.checklist{
				background-color: white !important;
				border-radius: 0.5em;
				margin: 5px auto;
			}
			.toptext{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 2px;
				
			}
		
			.dheader{
				width: 100%;
				display: flex;
				justify-content: center;
				align-content: center;
				background-color: white;
				border-bottom: 1px solid #C7C7CC;
			}
			.dheader>div{
				width: 25%;
				/*width: 33.3%;*/
				height: 3em;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 0.95em;
				border-right: 1px solid #C7C7CC;
			}
			.dheader>div:last-child{
				border: 0;
			}
			.brno{
				border-right: 0 !important;
			}

			.sjx{
				width: 0;
				height: 0;
				margin: 2px;
			    border:6px solid transparent;
				border-top: 6px solid #000000;
				position: relative;
				top: 15%;
			}
		.sj{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
 
}	
	
.tc{
   display: inline-block;
    position: relative;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: #CBCCCC;
    margin: 2px;
}
.tr{
   display: inline-block;
    position: relative;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: black;
    margin: 2px;
}
.bc{
   display: inline-block;
    position: relative;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom-color: #CBCCCC;
    margin: 2px;
}
.br{
   display: inline-block;
    position: relative;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom-color:  black;
    margin: 2px;
}		
.textlist{
	width: 100%;
	padding: 10px;
}
.checklist{
				background-color: white !important;
				border-radius: 0.5em;
				margin: 5px auto;
			}
			.flex1{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.left{
				
			}
			.right{
				padding-left:1em ;
				width: 80%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
				color: #676664;
			}
			.right>div{
				padding: 0.2em;
			}
			.dlist{
				width: 100%;
			}
			.dlistcss{
				width: 100%;
				padding: 0.5em;
				background-color: white;
				border-bottom: 1px solid #C7C7CC;
				position: relative;
			}
			.f{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0.2em;
				font-family: "微软雅黑";
			}
			
			.dnums{
				font-weight: 500;
				font-size: 1em;
				
			}
			.dqian{
				color: orange;
			}
			.dtime{
				font-size: 0.8em;
				color: #C8C7CC;
			}
			.dtui{
				font-size: 0.8em;
				color: red;
			}
			.dtype{
				font-size: 0.8em;
				color: #C8C7CC;
			}
			*{
				font-size: 0.95em;
			}
			.danhang>div:first-child{
				overflow: hidden;  
				text-overflow: ellipsis;  
				white-space: nowrap;
				width: 80%;
				text-align: center;
			}
			
			
			.tuidandiv{
				position: absolute;
				width: 20%;
				right: 0;
				top: -10px;
				overflow: hidden;
				transform:rotate(-20deg);
			}
			.tuidandiv>img{
				width: 100%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">单据管理</h1>
		</header>
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			 <div class="mui-scroll">
		    <div class="content">
		    	<div class="search">
		    		<div class="stext" id="stext">
		    			<div class="" id="shtml">
		    				订单号
		    			</div>
		    			<div class="sjx">
		    			</div>
		    		</div>
		    		<div class="ssdiv">
		    			<form action="" onkeydown="if(event.keyCode==13)return false;">
							<input id="keyvalue" class="ssinp" type="" placeholder="请输入关键字" />
						</form>
						<!--
                        	作者：592176224@qq.com
                        	时间：2019-03-14
                        	描述：
		    			<input class="ssinp" type="" name="keyvalue" id="keyvalue" placeholder="请输入单据号"/>
                        -->
		    		</div>
		    		<div class="simg" id="ssimgid">
		    			<img src="../img/ss-img2.png"/>
		    		</div>
		    	</div>
		    </div>
		    <div class="dments">
		    	<div class="dheader">
			    		<div class="bgw danhang"  id="allid">
			    			<div class="" >全部单据</div>
			    			<div class="sjx"></div>
			    		</div>
			    		<div class="danhang"  id="store">
			    			<div class="" >所有店面</div>
			    			<div class='sjx'></div>
			    		</div>
			    		<div class="danhang" id="employee">
			    			<div class="" >所有工号</div>
			    			<div class='sjx'></div>
			    		</div>
			    		<div class="danhang" id="datatime">
			    			<div class="" >今天</div>
			    			<div class='sjx'></div>
			    		</div>
			    		
		    	</div>
		    	
		    	<div class="dlist" id="dlist">
		    		<!--
                    	作者：592176224@qq.com
                    	时间：2019-01-02
                    	描述：
                   
		    		<div class="dlistcss">
		    			<div class="f">
		    				<span class="dnums">
		    					XF250415525555
		    				</span>
		    				<span class="dqian">
		    					￥108.00
		    				</span>
		    			</div>
		    			<div class="f">
		    				<span class="dtime">
		    					2018-05-08 15:32:21
		    				</span>
		    				<span class="dtui">
		    					已退单
		    				</span>
		    				<span class="dtype">
		    					积分兑换
		    				</span>
		    			</div>
		    		</div>
		    		 -->
		    		
		    	</div>
		    	<div class="morediv hidden" id="moreid">
				   	<span id="more_list">更多</span>
				</div>
		    	 <div class="fgd"></div>
		    </div>
		    
		    <!--
            	作者：592176224@qq.com
            	时间：2019-03-18
            	描述：mui-popover-action mui-popover-bottom
            -->
		    <div id="popover" class="mui-popover lcs-mui-popover">
			   <div class="listdiv">
			   		<div class="mui-input-row borbot" >
						<label>开始时间:</label>
			    		<div class="place items">
						    <button id='starttime' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始时间</button>
						</div>
					</div> 
					<div class="mui-input-row borbot" >
						<label>结束时间:</label>
			    		<div class="place items">
						    <button id='endtime' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">结束时间</button>
						</div>
					</div>
					<button type="button" id="okbut" class="mui-btn mui-btn-blue mui-btn-block">确定</button>
			   </div>
			</div>
			</div>
		</div>
			<div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" >
						<a href="#" data_type="date" date="today">今天</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#" data_type="date" date="yesterday">昨天</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#" data_type="date" date="week">本周</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#" data_type="date" date="month">本月</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#" data_type="custom" date="custom">时间段</a>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="#forward"><b>取消</b></a>
					</li>
				</ul>
			</div> 
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var page = 1,	//分页
			type = 'all',	//订单类型
			store_id = 0,	//门店id
			employee_id = 0, //员工id
			date_type = "date",	//时间参数日期和时间段
			datetime = "today", 	//时间参数为日期  生效  today今天 month本月
			start_time = "",	//时间段
			where_type = 'order_number',	//查询条件
			
			blist = [],
			end_time = "";
			
			
			window.onload = function(){
				mui.init({
					 pullRefresh: {
				        container: '#refreshContainer',
				        down: {
				        	height:50,//可选,默认50.触发下拉刷新拖动距离,
					      	auto: false,//可选,默认false.首次加载自动下拉刷新一次
					     	contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
					      	contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
					      	contentrefresh : "正在刷新...",
				            callback: pulldownRefresh
				        },
				        up:{
				        	callback: pullupRefresh
				        }
				    }
				});
				function pullupRefresh(){
					more_list();
					mui('#refreshContainer').pullRefresh().endPullupToRefresh();
				}
				function pulldownRefresh(){
					page = 1;
		      		plist = [];
		      		getcamlist();
		      		mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
		      		mui('#refreshContainer').pullRefresh().refresh(true);
				}
					//更多
				g("more_list").addEventListener("tap",function(){
					more_list();
				})
				
				$("#dlist").on("tap",".dlistcss",function(){
					//console.log($(this).attr("data-id"))
					//console.log($(this).attr("data-type"))
					gopage($(this).attr("data-id"),$(this).attr("data-type"));
				})
				
				mui.ready(function() {
					var stext = g('stext');
					var allid = g('allid');
					var store = g("store");
					var employee = g("employee");
					//var data = g("data")
					
					
					
					
	                var stextPicker = new mui.PopPicker();
	                stextPicker.setData([{
	                    value: 'order_number',
	                    text: '订单号'
	                },{
	                    value: 'card_number',
	                    text: '会员卡号'
	                }, {
	                    value: 'username',
	                    text: '会员姓名'
	                }, {
	                    value: 'phone',
	                    text: '手机号'
	                }, {
	                    value: 'plate_number',
	                    text: '车牌号'
	                }]);
	                
	                var allidPicker = new mui.PopPicker();
	                allidPicker.setData([{
	                    value: 'all',
	                    text: '全部单据'
	                },{
	                    value: 'product',
	                    text: '收银单据'
	                }, {
	                    value: 'recharge',
	                    text: '充值单据'
	                }, {
	                    value: 'consume',
	                    text: '次卡单据'
	                }, {
	                    value: 'score',
	                    text: '积分兑换'
	                }]);
	                
	                stext.addEventListener('tap', function(event) {
	                	mui('#refreshContainer').pullRefresh().setStopped(true);//暂时禁止滚动	
	                    stextPicker.show(function(items) {
	                    	where_type = items[0].value;
	                        stext.innerHTML =  '<div>'+items[0].text+'</div><div class="sjx"></div>';
	                    
	                    });
	                }, false);	
	                
              		allid.addEventListener('tap', function(event) {
              			mui('#refreshContainer').pullRefresh().setStopped(true);//暂时禁止滚动	
	                    allidPicker.show(function(items) {
	                    	type = items[0].value;
	                        allid.innerHTML = '<div>'+items[0].text+'</div><div class="sjx"></div>'
	                        page = 1;
	                        blist = [];
	                    	getbills();
	                    });
	                }, false);
	                
	                //门店列表
	                var jsondata = {
	                	url:"/api/store/lst",
	                	data:{
	                		access_token:acctoken(),
	                	}
	                }
	                ajax(jsondata,function(res){
	                	console.log("门店列表",res);
		                var storePicker = new mui.PopPicker();
		                var list2 = [];
		                res.data.forEach(function(item,index){
		                	//console.log(item)
		                	var str = {
		                		value: item.id,
		                    	text: item.store_name
		                	}
		                	list2.push(str);
		                })
		                storePicker.setData(list2);
	                	store.addEventListener('tap', function(event) {
	                		mui('#refreshContainer').pullRefresh().setStopped(true);//暂时禁止滚动	
		                    storePicker.show(function(items) {
		                    	store_id = items[0].value;
		                    	store.innerHTML =  '<div>'+items[0].text+'</div><div class="sjx"></div>';
		                    	page = 1;
		                    	blist = [];
			               		getbills();
		                    });
		                }, false);
		                
		                
	                })
	                
                	employee.addEventListener('tap', function(event) {
                		get_employee();
	                }, false);
	                
	                //日期选择
	                var datatime = g("datatime");
	                datatime.addEventListener('tap', function(event) {
	                   	mui('#forward').popover('toggle',g("popover"));
	                }, false);	
              		mui('#forward').on('tap', '.mui-popover-action li>a', function() {
						var a = this;
						date_type =  $(this).attr("data_type");
						datetime = $(this).attr("date");
						console.log(date_type);
						//隐藏						
						mui('#forward').popover('toggle');
						if(date_type != "custom"){
							datatime.innerHTML = '<div>'+a.innerHTML+'</div><div class="sjx"></div>';
							page = 1;
							blist = [];
							getbills();
						}else{
							//如果是时间段，打开时间选择
							setTimeout(function(e){
								 mui('#popover').popover('toggle',document.getElementById('popover'));
							},100)
						}
					})
              		var starttime = document.getElementById('starttime');
					var endtime = document.getElementById('endtime');
					
              		$("#okbut").on("tap",function(e){
						start_time = starttime.innerHTML;
						end_time =  endtime.innerHTML;
						mui('#popover').popover('hide');
						blist = [];
						getbills();
					})
              		
              		g("ssimgid").addEventListener("tap",function(){
              			blist = [];
              			getbills();
              		})
				
                starttime.addEventListener('tap', function(event) {
                	var starttimePicker = new mui.DtPicker({
	                    type: "date",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(2019, 01, 01, 0, 0),//设置开始日期   
	                    endDate: new Date(2099, 12, 31, 0, 0),//设置结束日期    //真正的是10.21
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    starttimePicker.show(function(e) {
                    	 starttime.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text;
                    });
                }, false);
                
              
                endtime.addEventListener('tap', function(event) {
                	var endtimePicker = new mui.DtPicker({
	                    type: "date",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(2019, 01, 01, 0, 0),//设置开始日期   
	                    endDate: new Date(2099, 12, 31, 0, 0),//设置结束日期    //真正的是10.21
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    endtimePicker.show(function(e) {
                    	 endtime.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text;
                    });
                }, false);
              		
              		document.onkeydown = function(event) {
						var e = event || window.event || arguments.callee.caller.arguments[0];
						if(e && e.keyCode == 13) {
							blist = [];
							getbills();
						}
					}
              
            	});
            	
            	
				
				getbills();
			}
			
			
			function get_employee(){
				//会员列表
	                var jsondata2 = {
	                	url:"/api/employee/lst",
	                	data:{
	                		access_token:acctoken(),
	                		store_id:store_id != 0 ? store_id:""
	                	}
	                }
	                ajax(jsondata2,function(res){
	                	console.log("会员列表",res);
		                var list2 = [];
		                var employeePicker = new mui.PopPicker();
		                res.data.data.forEach(function(item,index){
		                	var str = {
		                		value: item.id,
		                    	text: item.username
		                	}
		                	list2.push(str);
		                })
		                employeePicker.setData(list2);
	                    employeePicker.show(function(items) {
	                    	employee_id = items[0].value;
	                    	employee.innerHTML =  '<div>'+items[0].text+'</div><div class="sjx"></div>';
	                    	page = 1;
	                    	blist = [];
		                	getbills();
	                    });
	                })	
				
			}
			
			
			//更多
			function more_list(){
				page++;
				getbills();
			}
			
			function getbills(){
				var starttime = g("starttime");
				var endtime = g("endtime");
				var stime = starttime.innerText!="开始时间"?starttime.innerText:"";
				var etime = endtime.innerText!="结束时间"?endtime.innerText:"";
				var data = {
					url:"/api/bills/lst",
					data:{
						access_token:acctoken(),
						where_type:where_type,
						type:type,
						key:g("keyvalue").value||"",
						store_id:store_id!=0?store_id:"",
						employee_id: employee_id!=0?employee_id:"",
						date_type:date_type||"",
						date:datetime,
						start_time:stime,
						end_time:etime,
						page:page,
					}
				}
				ajax(data,function(res){
					console.log("单据列表",res);
					let list = res.data.data;
					if(list.length ){
						list.forEach(function(item,index){
							blist.push(item);
						})
						blist = remove_duplicate_document(blist);
						setbills(blist);
						$("#moreid").removeClass("hidden");
						if(list.length < res.data.per_page){
							$("#moreid").addClass("hidden");
						}
					}else{
						if(page == 1){
							var str = '<div class="nolistdiv">暂无记录<div>'
							g("dlist").innerHTML = str;
							$("#moreid").addClass("hidden");
						}else{
							mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
							mui('#refreshContainer').pullRefresh().refresh(false);
							page--;
							$("#moreid").addClass("hidden");
							mui.toast('没有更多数据了');
						}
					}
					setbills(blist);
					//setbills(res.data.data);
				})
			}
			
			function setbills(list){
				var str = "";
				if(list.length){
					list.forEach(function(item,index){
						str += '<div class="dlistcss" data-id="'+item.id+'" data-type="'+item.type+'">'+
					 	'<div class="f"><span class="dnums">'+
		    			item.order_number +
		    			'</span><span class="dqian">￥'+
		    			item.order_money +
		    			'</span></div><div class="f"><span class="dtime">'+
		    			item.createtime +
		    			'</span><span class="dtui">'+
		    			item.status+
		    			'</span><span class="dtype">'+
		    			item.type_zh+
		    			'</span></div>';
		    			if(item.status == "已退单"){
						str += '<div class="tuidandiv">'+
							    '<img src="../img/tuidan.png"/>'+
							    '</div>';
						}
		    			str += '</div>';
						
					})
					for (var i = 0; i < list.length; i++) {
					 
					}
				}else{
					str += '<div class="nolistdiv">暂无数据</div>'
				}
				
				g("dlist").innerHTML = str;
				
			}
			/*function get(){
				var data = {
					url:"/api/order/list_bills",
					data:{
						access_token:acctoken(),page:1
					}
				}
				ajax(data,function(res){
					console.log(res);
					
				})
			}*/
			
			function gopage(id,type){
				mui.openWindow({
					url:'documents/documentsDetailed.html?id='+id+'&type='+type,
					id:'documentsDetailed'
				})
			}
			
			//更多
			function more_list(){
				page++;
				getbills();
			}
			//刷新
			function onshow(){
				page = 1;
				blist = [];
				getbills();
			}
		</script>
	</body>

</html>